<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<style>
    .alert{
        width: 300px;
        height: 30x;
     
    }
 
</style>

<body>
   
    <h1>欢迎登录</h1>
    <!-- 提示框文字封装函数，获取提示框，封装提示框函数，调用满足提示需求 -->


    <div class="alert hidden" role="alert">提示文本框</div>


<form action="javascript:;" class="login-form">
   
    <h4>账户名</h4>
    <input class="username" type="text" placeholder="请输入用户名" name="username">
    <br>
    <h4>密码</h4>
    <input class="password" type="password" placeholder="请输入密码" name="password">
    <br>

    <button class="btn btn-success">点击登录</button>

</form>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">

    </script>
    <script src="form-serialize.js"></script>
    <script>
        
        
        const alertmy = document.querySelector('.alert')
        
         // 1.显示文本框
         //2.不同提示文字msg，成功失败颜色isSuccess(true绿色 false红色)
        //  3.经过2秒后，让提示框自动消失


        // 实现功能细节

        function alertFn(msg,isSuccess){
        alertmy.classList.remove('hidden')
      
        // 实现细节
            alertmy.innerHTML= msg
            const bgStyle = isSuccess?'alert-success':'alert-danger'
            alertmy.classList.add(bgStyle)

        // 设置两秒隐藏
    // 为了避免类名冲突，重置背景色

        setTimeout(()=>{
            alertmy.classList.add('hidden')
            alertmy.classList.remove(bgStyle)
        },5000)
       }





     document.querySelector('.btn').addEventListener(
        'click',()=>{
           // 获取form表单对象

        const form = document.querySelector('.login-form')
        // 使用serrialize函数

            const data =serialize(form,{hash:true,empty:true})
            console.log(data);
            const{username,password}=data
            // 定义用户名和密码长度
            if(username<8){

            // 阻止代码执行
                alertFn('用户名必须大于等于8位哦',false)
                return

            }if(password<6){
               alertFn('密码必须大于等于6位哦',false)
                return
            }
            axios({
                url:'http://hmajax.itheima.net/api/login',
                method:'post',
                data:{
                 username:username,
                 password:password
                }
            }).then(result=>{
                alertFn(result.data.message,true)
            }).catch(error=>{
                alertFn(error.response.data.message,false)
            })
        }
     )
    // ===========================================================================
//   document.querySelector('.btn').addEventListener(
//     'click',()=>{
//         const username = document.querySelector('.username').value
//         const password = document.querySelector('.password').value
//         console.log(username,password);
//         axios({
//             URL:'http://hmajax.itheima.net/api/register',
//             method:'post',
//             data:{
//                 username:username,
//                 password:password

//             }

//         }).then(success=>{
//             console.log(success);
//         })
//     }
//   )
    // document.querySelector('.btn').addEventListener(
    //   'click',()=>{
    //     axios({
    //         url:'http://hmajax.itheima.net/api/login',
    //         method:'post',
    //         data:{
    //             username:'itheima007',
    //             password:'7654321'
    //         }
    //     }).then(success=>{
    //         console.log(success);
    //     })
      
    
    
    </script>
  
</body>
</html>